<template>
  <div>
    <h3>文章目录</h3>
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>

  </div>
</template>

<script>
// console.log("leftside");
import {DirTree} from '@/utils/utils'
const dirTree =new DirTree("./data/article/");

console.log(dirTree.children);
export default {
  // el:"#leftside",
  name: "Article",
  data() {
    return {
      data: dirTree.children,
      defaultProps: {
        children: "children",
        label: "curValue",
      },
    };
  },
  props: {
    HeaderIndex: String,
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="css" scoped>
#leftside {
  border: 2px;
  background-color: aqua;
}
</style>
  